<template>
  <div class="app-container">
    <div class="btnCss">
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
          <Todo v-if="active == 'first'"></Todo>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
          <Finished v-if="active == 'second'"></Finished>
        </el-tab-pane>
        <el-tab-pane v-if="checkPermi(['workflow:askForLeave:manage'])" label="请假申请管理" name="third">
          <Gather v-if="active == 'third'"></Gather>
        </el-tab-pane>
      </el-tabs>
        <!-- <el-button :class="active==0?'active':''" v-hasPermi="['workflow:process:todobTab']" @click="active=0">待办任务</el-button>
        <el-button :class="active==1?'active':''" v-hasPermi="['workflow:process:finishedTab']" @click="active=1">已办任务</el-button>
        <el-button :class="active==2?'active':''" v-hasPermi="['workflow:process:detailTab']" @click="active=2">应用项目搜索</el-button> -->
    </div>
    <!-- <div v-if="active==0">
        <Todo></Todo>
    </div>
    <div v-if="active==1">
      <Finished></Finished>
    </div>
    <div v-if="active==2">2</div> -->
  </div>
</template>

<script>
import Todo from './components/todo.vue';
import Finished from './components/finished.vue';
import Gather from './components/gather.vue';
export default {
    name:'AskForLeave',
    components: {
      Todo,
      Finished,
        Gather
    },
  data() {
    return {
       active:'first'
    };
    },
    mounted() {
        // 获取按钮元素数组中第一个.click()
  },
  methods: {
    // 
    handleClick(tab, event) {
      this.active = tab.name
    }
  }
};
</script>

<style lang="scss" scoped>
// .btnCss {
//     ::v-deep .el-button {
//     border: none;
//     border-radius: 0;
// }
// .active {
//     color: #409eff;
//     border-bottom: 2px solid #409eff;

// }
// }


</style>
